<!DOCTYPE html>
<html>
<head>
  <title>Canvas Demo</title>
</head>
<body>
  <canvas id="myCanvas" width="100" height="100" style="border:1px solid #000000;"></canvas>

  <script>
    // 获取canvas元素
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    // 监听document的鼠标移动事件
    document.addEventListener("mousemove", function(event) {
      // 获取canvas在页面上的位置
      var rect = canvas.getBoundingClientRect();

      // 计算鼠标在canvas上的相对坐标
      var x = event.clientX - rect.left;
      var y = event.clientY - rect.top;

      // 判断鼠标是否在canvas内部
      if (x >= 0 && x <= canvas.width && y >= 0 && y <= canvas.height) {
        console.log("X: " + x + ", Y: " + y);
      } else {
        console.log("超出范围");
      }
    });
  </script>
</body>
</html>
